<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/css/font.css">
		<link rel="stylesheet" href="/css/xadmin.css">
	</head>

	<body>
		<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="#">课程管理</a>
                <a>
                    <cite>网上选课</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
             title="刷新">
                <i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
		<div class="x-body" id="app">
			<span class="x-right" style="line-height:40px;float:left">共有数据：{{ pageInfo.total }} 条，当前{{ pageInfo.pageNum }} / {{ pageInfo.pages }}页</span>
			<table class="layui-table">
				<thead>
					<tr>
						<th>课程代码</th>
                        <th>课程名称</th>
                        <th width="60">课程性质</th>
                        <th width="60">上课星期</th>
                        <th width="60">上课时间</th>
                        <th width="60">上课周期</th>
                        <th>授课教室</th>
                        <th>授课教师</th>
                        <th>课程人数</th>
						<th width="50">操作</th>
				</thead>
				<tbody>
					<tr v-for="tchCourse in tchCourses">
						<td>{{ tchCourse.courseNo }}</td>
                        <td>{{ tchCourse.courseName }}</td>
                        <td v-if="tchCourse.courseType == 2" >专业选修</td>
                        <td>{{ tchCourse.startDay }}</td>
                        <td>{{ tchCourse.startTime }}</td>
                        <td>{{ tchCourse.time }}</td>
                        <td>{{ tchCourse.roomName }}</td>
                        <td>{{ tchCourse.teacherNo }}</td>
                        <td v-if="tchCourse.chooseNum == null">0 / {{ tchCourse.stuNumber }}</td>
                        <td v-else>{{ tchCourse.chooseNum }} / {{ tchCourse.stuNumber }}</td>
						<td class="td-manage">
						    <button class="layui-btn layui-btn-sm" onclick="choose_course(this)" :data-id="tchCourse.id" :data-courseName="tchCourse.courseName" href="javascript:;"><i
                                 class="layui-icon">&#xe61f;</i>选课</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="page" style="margin-top: 10px !important;">
                <div>
                  <a class="prev pageTxt" href="javascript:void(0)">上一页</a>
                  <a class="first pageTxt" href="javascript:void(0)">首页</a>
                  <template v-for="pageNum in pageInfo.navigatepageNums">
                      <a class="num" href="javascript:void(0)" v-if="pageInfo.pageNum != pageNum" :data="pageNum">{{ pageNum }}</a>
                      <span class="current" v-else :data="pageNum">{{ pageNum }}</span>
                  </template>
                  <a class="last pageTxt" href="javascript:void(0)">尾页</a>
                  <a class="next pageTxt" href="javascript:void(0)">下一页</a>
                </div>
           </div>
		</div>
		<script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/vue.min.js"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
		<script>
			var vm = new Vue({
	            el : '#app',
	            data : {
	                // 选修课
	                tchCourses : "",
	                pageInfo: ""
	            },
	            created : function() {
	                // 获取选修课
	               this.listTchCourse(1);
	            },
	            methods : {
	            	listTchCourse : function(pageNum) {
	                    var vm = this;
	                    $.ajax({
	                        url : "/student/course/listTchCourse",
	                        data: {
	                        	pageNum : pageNum
	                        },
	                        type : "get",
	                        success : function(result) {
	                            if (result.state) {
	                            	var data = result.data;
	                                vm.pageInfo = data;
	                                vm.tchCourses = data.list;
	                            } else {
	                                layui.use(['layer'], function(){
	                                    var layer = layui.layer
	                                    layer.msg(""+result.msg, {icon: 5});
	                                });
	                            }
	                        }
	                    });
	                }
	            }
	        });

			// 选课
			function choose_course(obj) {
				var tchCourseId = $(obj).attr("data-id");
				var courseName = $(obj).attr("data-courseName");
				layer.confirm('确认要选择【'+courseName+'】吗？', function(index) {
                    $.ajax({
                         url : "/student/course/chooseCourse",
                         type : "post",
                         data : {
                        	 tchCourseId: tchCourseId
                         },
                         success : function(result) {
                             if (result.state) {
                                 layer.msg('选课成功!',{icon:1,time:1000});
                                 vm.listTchCourse(vm.pageInfo.pageNum);
                             } else {
                                 layer.msg(""+result.msg, {icon: 5});
                             }
                         }
                     });
               });
			}
			
			// 点击页码数，进行跳转
            $(".page").delegate(".num", "click", function() {
                var pageNum = $(this).attr("data");
                vm.listTchCourse(pageNum);
            });
            // 上一页
            $(".page").delegate(".prev", "click", function() {
                if (vm.pageInfo.hasPreviousPage) {
                    vm.listTchCourse(vm.pageInfo.pageNum - 1);
                }
            });
            // 下一页
            $(".page").delegate(".next", "click", function() {
                if (vm.pageInfo.hasNextPage) {
                    vm.listTchCourse(vm.pageInfo.pageNum + 1);
                }
            });
            // 首页
            $(".page").delegate(".first", "click", function() {
                if (!vm.pageInfo.isFirstPage) {
                    vm.listTchCourse(1);
                }
            });
            // 尾页
            $(".page").delegate(".last", "click", function() {
                if (!vm.pageInfo.isLastPage) {
                    vm.listTchCourse(vm.pageInfo.pages);
                }
            });
		</script>
	</body>

</html>
